<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchInfo"
          ref="searchInfo"
        >
          <el-row>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Age:" prop="age.lower_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.age.lower_limit"
                placeholder="lower limit"
              ></el-input>
            </el-form-item>
            <el-form-item><i class="el-icon-right"></i></el-form-item>
            <el-form-item prop="age.upper_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.age.upper_limit"
                placeholder="upper limit"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="Registration Time:" prop="reg_time">
              <el-date-picker
                type="daterange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                v-model="searchInfo.reg_time"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="18">
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <br />
    <div
      :style="{ height: '500%', width: '100%' }"
      ref="myriskDistribution"
    ></div>
  </div>
</template>

<script>
export default {
  name: "RiskDistribution",
  data() {
    return {
      searchInfo: {
        reg_time: [],
        age: { lower_limit: "", upper_limit: "" },
      },
      option: {
        title: {
          text: "Breast Cancer Prediction Risk",
          textStyle: {
            fontSize: 25,
          },
          subtext:
            "Risk distribution of breast cancer in the collected questionnaires",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 15,
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            fontSize: 15,
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //保存图片
          },
        },
        series: [
          {
            name: "Risk proportion",
            type: "pie",
            radius: "60%",
            data: [
              { value: 1048, name: "0~20%" },
              { value: 735, name: "20~40%" },
              { value: 580, name: "40~60%" },
              { value: 484, name: "60~80%" },
              { value: 300, name: "80~100%" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.riskDistribution();
  },
  methods: {
    riskDistribution() {
      let myChart = this.$echarts.init(this.$refs.myriskDistribution);
      myChart.setOption(this.option);
    },
    //清空搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.option.series[0].data = [
        { value: 1048, name: "0~20%" },
        { value: 735, name: "20~40%" },
        { value: 580, name: "40~60%" },
        { value: 484, name: "60~80%" },
        { value: 300, name: "80~100%" },
      ];
      this.riskDistribution();
    },
    searchForm(formName) {
      //搜索表单信息

      console.log(this.option.series[0].data);
      if (formName.reg_time.length == 2) {
        this.option.series[0].data = [
          { value: 11, name: "0~20%" },
          { value: 3, name: "20~40%" },
          { value: 20, name: "40~60%" },
          { value: 34, name: "60~80%" },
          { value: 3, name: "80~100%" },
        ];
        this.riskDistribution();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>